<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cartzilla | Footer</title>
    <!-- SEO Meta Tags-->
    <meta name="description" content="Cartzilla - Bootstrap E-commerce Template">
    <meta name="keywords" content="bootstrap, shop, e-commerce, market, modern, responsive,  business, mobile, bootstrap, html5, css3, js, gallery, slider, touch, creative, clean">
    <meta name="author" content="Createx Studio">
    <!-- Viewport-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon and Touch Icons-->
    <link rel="apple-touch-icon" sizes="180x180" href="../apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png">
    <link rel="manifest" href="../site.webmanifest">
    <link rel="mask-icon" color="#fe6a6a" href="../safari-pinned-tab.svg">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="theme-color" content="#ffffff">
    <!-- Vendor Styles including: Font Icons, Plugins, etc.-->
    <link rel="stylesheet" media="screen" href="../vendor/simplebar/dist/simplebar.min.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/tiny-slider/dist/tiny-slider.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/prismjs/themes/prism.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/prismjs/plugins/toolbar/prism-toolbar.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/prismjs/plugins/line-numbers/prism-line-numbers.css"/>
    <!-- Main Theme Styles + Bootstrap-->
    <link rel="stylesheet" media="screen" href="../css/theme.min.css">
    <!-- Google Tag Manager-->
    <script>
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-WKV3GT5');
    </script>
  </head>
  <!-- Body-->
  <body>
    <!-- Google Tag Manager (noscript)-->
    <noscript>
      <iframe src="//www.googletagmanager.com/ns.html?id=GTM-WKV3GT5" height="0" width="0" style="display: none; visibility: hidden;"></iframe>
    </noscript>
    <main class="container-fluid">
      <!-- Main content-->
      <section class="offcanvas-enabled row pb-3 pb-md-4">
        <div class="col-xxl-9">
          <!-- Navbar-->
          <header class="navbar navbar-expand navbar-light fixed-top bg-light shadow-sm px-3 px-lg-4" data-scroll-header data-fixed-element><a class="navbar-brand d-lg-none" href="typography.html"><img src="../img/logo-dark.png" width="142" alt="Cartzilla"></a>
            <ul class="navbar-nav ms-auto d-none d-lg-flex">
              <li class="nav-item"><a class="nav-link" href="../index.html"><i class="ci-eye align-middle mt-n1 me-2"></i>Live preview</a></li>
              <li class="nav-item">
                <div class="nav-link disabled text-border px-1">|</div>
              </li>
              <li class="nav-item"><a class="nav-link" href="../docs/dev-setup.html"><i class="ci-book align-middle mt-n1 me-2"></i>Documentation</a></li>
              <li class="nav-item">
                <div class="nav-link disabled text-border px-1">|</div>
              </li>
            </ul>
            <button class="navbar-toggler d-block d-lg-none ms-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#components-nav"><span class="navbar-toggler-icon"></span></button><a class="btn btn-primary btn-shadow ms-2 ms-lg-4" href="https://themes.getbootstrap.com/product/cartzilla-bootstrap-e-commerce-template-ui-kit/" target="_blank" rel="noopener"><i class="ci-cart me-2 d-none d-sm-inline-block"></i>Buy now</a>
          </header>
          <!-- Side navigation-->
          <aside class="offcanvas offcanvas-expand bg-dark" id="components-nav">
            <div class="offcanvas-cap bg-darker d-none d-lg-block"><a class="navbar-brand py-1" href="typography.html"><img src="../img/logo-light.png" width="142" alt="Cartzilla"></a><span class="badge bg-info">Components</span></div>
            <div class="offcanvas-cap bg-darker align-items-center d-flex d-lg-none">
              <div class="d-flex align-items-center">
                <h5 class="text-light mb-0 me-2">Menu</h5><span class="badge bg-info">Components</span>
              </div>
              <button class="btn-close btn-close-white" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body" data-simplebar data-simplebar-auto-hide="true">
              <div class="pt-4 pb-3 mt-lg-3">
                <div class="d-flex d-lg-none pb-4 mb-4 border-bottom border-light"><a class="btn btn-outline-light btn-sm me-3" href="../index.html"><i class="ci-eye align-middle mt-n1 me-2"></i>Live demo</a><a class="btn btn-light btn-sm ps-2" href="../docs/dev-setup.html"><i class="ci-book align-middle mt-n1 me-2"></i>Documentation</a></div>
                <div class="widget widget-links widget-light border-bottom border-light mb-4 pb-4 me-n3">
                  <h3 class="widget-title text-white">Content</h3>
                  <ul class="widget-list">
                    <li class="widget-list-item"><a class="widget-list-link" href="typography.html">Typography</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="icon-font.html">Icon font</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="code.html">Code</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="images.html">Images &amp; figures</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="tables.html">Tables</a></li>
                  </ul>
                </div>
                <div class="widget widget-links widget-light border-bottom border-light mb-4 pb-4 me-n3">
                  <h3 class="widget-title text-white">Components</h3>
                  <ul class="widget-list">
                    <li class="widget-list-item"><a class="widget-list-link" href="accordion.html">Accordion</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="alerts.html">Alerts</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="badge.html">Badges</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="blog-components.html">Blog components</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="breadcrumb.html">Breadcrumb</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="buttons.html">Buttons</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="button-group.html">Button group</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="cards.html">Cards</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="carousel.html">Carousel</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="charts.html">Charts</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="collapse.html">Collapse</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="contacts-card.html">Contacts card</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="countdown.html">Countdown</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="dropdowns.html">Dropdowns</a></li>
                    <li class="widget-list-item active"><a class="widget-list-link" href="footer.html">Footer</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="forms.html">Forms</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="gallery.html">Gallery</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="input-group.html">Input group</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="list-group.html">List group</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="modal.html">Modal</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="navbar.html">Navbar</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="pagination.html">Pagination</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="pills.html">Pills</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="popovers.html">Popovers</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="progress.html">Progress</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="shop-components.html">Shop components</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="social-buttons.html">Social buttons</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="spinners.html">Spinners</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="steps.html">Steps</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="tabs.html">Tabs</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="team.html">Team</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="testimonials.html">Testimonials / reviews</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="toasts.html">Toasts</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="tooltips.html">Tooltips</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="video-button.html">Video button</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="widgets.html">Widgets</a></li>
                  </ul>
                </div>
                <div class="widget widget-links widget-light mb-4 pb-2">
                  <h3 class="widget-title text-white">Utilities</h3>
                  <ul class="widget-list">
                    <li class="widget-list-item"><a class="widget-list-link" href="https://getbootstrap.com/docs/5.0/utilities/borders/" target="_blank" rel="noopener">Bootstrap</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="utilities.html">Cartzilla</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </aside>
          <!-- Page title-->
          <div class="border-bottom mt-lg-2 pt-5 pb-2 mb-5">
            <h1 class="mt-3 mt-lg-4 pt-5">Footer</h1>
            <div class="d-flex flex-wrap flex-md-nowrap justify-content-between">
              <p class="text-muted">The bottom section of a webpage. Typically contains navigation, widgets and relevant copyright information.</p>
              <div class="ps-md-4 mb-3"><span class="badge bg-info">Cartzilla component</span></div>
            </div>
          </div>
          <!-- Light version-->
          <section class="pb-5 mb-md-2" id="footer-light">
            <h2 class="h5 mb-3">Light version</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result1" data-bs-toggle="tab" role="tab" aria-controls="result1" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html1" data-bs-toggle="tab" role="tab" aria-controls="html1" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug1" data-bs-toggle="tab" role="tab" aria-controls="pug1" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result1" role="tabpanel">
                    <footer class="bg-secondary pt-5">
                      <div class="px-4">
                        <div class="row pb-2">
                          <div class="col-lg-4 col-sm-6">
                            <div class="widget widget-links pb-2 mb-4">
                              <h3 class="widget-title">Shop departments</h3>
                              <ul class="widget-list">
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Sneakers &amp; Athletic</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Athletic Apparel</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Sandals</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Jeans</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Shirts &amp; Tops</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Shorts</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">T-Shirts</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Swimwear</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Clogs &amp; Mules</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Bags &amp; Wallets</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Accessories</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Sunglasses &amp; Eyewear</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Watches</a></li>
                              </ul>
                            </div>
                          </div>
                          <div class="col-lg-4 col-sm-6">
                            <div class="widget widget-links pb-2 mb-4">
                              <h3 class="widget-title">Account &amp; shipping info</h3>
                              <ul class="widget-list">
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Your account</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Shipping rates &amp; policies</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Refunds &amp; replacements</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Order tracking</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Delivery info</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Taxes &amp; fees</a></li>
                              </ul>
                            </div>
                            <div class="widget widget-links pb-2 mb-4">
                              <h3 class="widget-title">About us</h3>
                              <ul class="widget-list">
                                <li class="widget-list-item"><a class="widget-list-link" href="#">About company</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Our team</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Careers</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">News</a></li>
                              </ul>
                            </div>
                          </div>
                          <div class="col-lg-4">
                            <div class="widget pb-2 mb-4">
                              <h3 class="widget-title pb-1">Stay informed</h3>
                              <form class="input-group flex-nowrap"><i class="ci-mail position-absolute top-50 translate-middle-y text-muted fs-base ms-3"></i>
                                <input class="form-control rounded-start" type="email" placeholder="Your email" required>
                                <button class="btn btn-primary" type="submit">Subscribe*</button>
                              </form>
                              <div class="form-text">*Subscribe to our newsletter to receive early discount offers, updates and new products info.</div>
                            </div>
                            <div class="widget pb-2 mb-4">
                              <h3 class="widget-title pb-1">Download our app</h3>
                              <div class="d-flex flex-wrap">
                                <div class="me-2 mb-2"><a class="btn-market btn-apple" href="#" role="button"><span class="btn-market-subtitle">Download on the</span><span class="btn-market-title">App Store</span></a></div>
                                <div class="mb-2"><a class="btn-market btn-google" href="#" role="button"><span class="btn-market-subtitle">Download on the</span><span class="btn-market-title">Google Play</span></a></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="pt-5 px-4" style="background-color: #ecf2f7;">
                        <div class="row pb-3">
                          <div class="col-xl-3 col-sm-6 mb-4">
                            <div class="d-flex"><i class="ci-rocket text-primary" style="font-size: 2.25rem;"></i>
                              <div class="ps-3">
                                <h6 class="fs-base mb-1">Fast and free delivery</h6>
                                <p class="mb-0 fs-ms text-muted">Free delivery for all orders over $200</p>
                              </div>
                            </div>
                          </div>
                          <div class="col-xl-3 col-sm-6 mb-4">
                            <div class="d-flex"><i class="ci-currency-exchange text-primary" style="font-size: 2.25rem;"></i>
                              <div class="ps-3">
                                <h6 class="fs-base mb-1">Money back guarantee</h6>
                                <p class="mb-0 fs-ms text-muted">We return money within 30 days</p>
                              </div>
                            </div>
                          </div>
                          <div class="col-xl-3 col-sm-6 mb-4">
                            <div class="d-flex"><i class="ci-support text-primary" style="font-size: 2.25rem;"></i>
                              <div class="ps-3">
                                <h6 class="fs-base mb-1">24/7 customer support</h6>
                                <p class="mb-0 fs-ms text-muted">Friendly 24/7 customer support</p>
                              </div>
                            </div>
                          </div>
                          <div class="col-xl-3 col-sm-6 mb-4">
                            <div class="d-flex"><i class="ci-card text-primary" style="font-size: 2.25rem;"></i>
                              <div class="ps-3">
                                <h6 class="fs-base mb-1">Secure online payment</h6>
                                <p class="mb-0 fs-ms text-muted">We possess SSL / Secure сertificate</p>
                              </div>
                            </div>
                          </div>
                        </div>
                        <hr class="mb-5">
                        <div class="row pb-2">
                          <div class="col-md-6 text-center text-md-start mb-4">
                            <div class="text-nowrap mb-4"><a class="d-inline-block align-middle mt-n1 me-3" href="#"><img class="d-block" src="../img/footer-logo-dark.png" width="117" alt="Cartzilla"></a>
                              <div class="btn-group dropdown disable-autohide">
                                <button class="btn btn-outline-secondary btn-sm dropdown-toggle px-2" type="button" data-bs-toggle="dropdown"><img class="me-2" src="../img/flags/en.png" width="20" alt="English">Eng / $</button>
                                <ul class="dropdown-menu my-1">
                                  <li class="dropdown-item">
                                    <select class="form-select form-select-sm">
                                      <option value="usd">$ USD</option>
                                      <option value="eur">€ EUR</option>
                                      <option value="ukp">£ UKP</option>
                                      <option value="jpy">¥ JPY</option>
                                    </select>
                                  </li>
                                  <li><a class="dropdown-item pb-1" href="#"><img class="me-2" src="../img/flags/fr.png" width="20" alt="Français">Français</a></li>
                                  <li><a class="dropdown-item pb-1" href="#"><img class="me-2" src="../img/flags/de.png" width="20" alt="Deutsch">Deutsch</a></li>
                                  <li><a class="dropdown-item" href="#"><img class="me-2" src="../img/flags/it.png" width="20" alt="Italiano">Italiano</a></li>
                                </ul>
                              </div>
                            </div>
                            <div class="widget widget-links">
                              <ul class="widget-list d-flex flex-wrap justify-content-center justify-content-md-start">
                                <li class="widget-list-item me-4"><a class="widget-list-link" href="#">Outlets</a></li>
                                <li class="widget-list-item me-4"><a class="widget-list-link" href="#">Affiliates</a></li>
                                <li class="widget-list-item me-4"><a class="widget-list-link" href="#">Support</a></li>
                                <li class="widget-list-item me-4"><a class="widget-list-link" href="#">Privacy</a></li>
                                <li class="widget-list-item me-4"><a class="widget-list-link" href="#">Terms of use</a></li>
                              </ul>
                            </div>
                          </div>
                          <div class="col-md-6 text-center text-md-end mb-4">
                            <div class="mb-3"><a class="btn-social bs-outline bs-twitter ms-2 mb-2" href="#"><i class="ci-twitter"></i></a><a class="btn-social bs-outline bs-facebook ms-2 mb-2" href="#"><i class="ci-facebook"></i></a><a class="btn-social bs-outline bs-instagram ms-2 mb-2" href="#"><i class="ci-instagram"></i></a><a class="btn-social bs-outline bs-pinterest ms-2 mb-2" href="#"><i class="ci-pinterest"></i></a><a class="btn-social bs-outline bs-youtube ms-2 mb-2" href="#"><i class="ci-youtube"></i></a></div><img class="d-inline-block" src="../img/cards-alt.png" width="187" alt="Payment methods">
                          </div>
                        </div>
                        <div class="pb-4 fs-xs text-muted text-center text-md-start">© All rights reserved. Made by <a class="text-muted" href="#">Createx Studio</a></div>
                      </div>
                    </footer>
                  </div>
                  <div class="tab-pane fade" id="html1" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Light footer --&gt;
&lt;footer class=&quot;bg-secondary pt-5&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row pb-2&quot;&gt;
      &lt;div class=&quot;col-md-4 col-sm-6&quot;&gt;
        &lt;div class=&quot;widget widget-links pb-2 mb-4&quot;&gt;
          &lt;h3 class=&quot;widget-title&quot;&gt;Shop departments&lt;/h3&gt;
          &lt;ul class=&quot;widget-list&quot;&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Sneakers &amp; Athletic&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Athletic Apparel&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Sandals&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Jeans&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Shirts &amp; Tops&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Shorts&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;T-Shirts&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Swimwear&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Clogs &amp; Mules&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Bags &amp; Wallets&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Accessories&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Sunglasses &amp; Eyewear&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Watches&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-md-4 col-sm-6&quot;&gt;
        &lt;div class=&quot;widget widget-links pb-2 mb-4&quot;&gt;
          &lt;h3 class=&quot;widget-title&quot;&gt;Account &amp; shipping info&lt;/h3&gt;
          &lt;ul class=&quot;widget-list&quot;&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Your account&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Shipping rates &amp; policies&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Refunds &amp; replacements&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Order tracking&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Delivery info&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Taxes &amp; fees&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class=&quot;widget widget-links pb-2 mb-4&quot;&gt;
          &lt;h3 class=&quot;widget-title&quot;&gt;About us&lt;/h3&gt;
          &lt;ul class=&quot;widget-list&quot;&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;About company&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Our team&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Careers&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;News&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-md-4&quot;&gt;
        &lt;div class=&quot;widget pb-2 mb-4&quot;&gt;
          &lt;h3 class=&quot;widget-title pb-1&quot;&gt;Stay informed&lt;/h3&gt;
          &lt;form class=&quot;input-group flex-nowrap&quot;&gt;
            &lt;i class=&quot;ci-mail position-absolute top-50 translate-middle-y text-muted fs-base ms-3&quot;&gt;&lt;/i&gt;
            &lt;input class=&quot;form-control rounded-start&quot; type=&quot;email&quot; placeholder=&quot;Your email&quot; required&gt;
            &lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot;&gt;Subscribe*&lt;/button&gt;
          &lt;/form&gt;
          &lt;div class=&quot;form-text&quot;&gt;*Subscribe to our newsletter to receive early discount offers, updates and new products info.&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;widget pb-2 mb-4&quot;&gt;
          &lt;h3 class=&quot;widget-title pb-1&quot;&gt;Download our app&lt;/h3&gt;
          &lt;div class=&quot;d-flex flex-wrap&quot;&gt;
            &lt;div class=&quot;me-2 mb-2&quot;&gt;
              &lt;a class=&quot;btn-market btn-apple&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;
                &lt;span class=&quot;btn-market-subtitle&quot;&gt;Download on the&lt;/span&gt;
                &lt;span class=&quot;btn-market-title&quot;&gt;App Store&lt;/span&gt;
              &lt;/a&gt;
            &lt;/div&gt;
            &lt;div class=&quot;mb-2&quot;&gt;
              &lt;a class=&quot;btn-market btn-google&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;
                &lt;span class=&quot;btn-market-subtitle&quot;&gt;Download on the&lt;/span&gt;
                &lt;span class=&quot;btn-market-title&quot;&gt;Google Play&lt;/span&gt;
              &lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;pt-5&quot; style=&quot;background-color: #ecf2f7;&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row pb-3&quot;&gt;
        &lt;div class=&quot;col-md-3 col-sm-6 mb-4&quot;&gt;
          &lt;div class=&quot;d-flex&quot;&gt;
            &lt;i class=&quot;ci-rocket text-primary&quot; style=&quot;font-size: 2.25rem;&quot;&gt;&lt;/i&gt;
            &lt;div class=&quot;ps-3&quot;&gt;
              &lt;h6 class=&quot;fs-base mb-1&quot;&gt;Fast and free delivery&lt;/h6&gt;
              &lt;p class=&quot;mb-0 fs-ms text-muted&quot;&gt;Free delivery for all orders over $200&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-md-3 col-sm-6 mb-4&quot;&gt;
          &lt;div class=&quot;d-flex&quot;&gt;
            &lt;i class=&quot;ci-currency-exchange text-primary&quot; style=&quot;font-size: 2.25rem;&quot;&gt;&lt;/i&gt;
            &lt;div class=&quot;ps-3&quot;&gt;
              &lt;h6 class=&quot;fs-base mb-1&quot;&gt;Money back guarantee&lt;/h6&gt;
              &lt;p class=&quot;mb-0 fs-ms text-muted&quot;&gt;We return money within 30 days&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-md-3 col-sm-6 mb-4&quot;&gt;
          &lt;div class=&quot;d-flex&quot;&gt;
            &lt;i class=&quot;ci-support text-primary&quot; style=&quot;font-size: 2.25rem;&quot;&gt;&lt;/i&gt;
            &lt;div class=&quot;ps-3&quot;&gt;
              &lt;h6 class=&quot;fs-base mb-1&quot;&gt;24/7 customer support&lt;/h6&gt;
              &lt;p class=&quot;mb-0 fs-ms text-muted&quot;&gt;Friendly 24/7 customer support&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-md-3 col-sm-6 mb-4&quot;&gt;
          &lt;div class=&quot;d-flex&quot;&gt;
            &lt;i class=&quot;ci-card text-primary&quot; style=&quot;font-size: 2.25rem;&quot;&gt;&lt;/i&gt;
            &lt;div class=&quot;ps-3&quot;&gt;
              &lt;h6 class=&quot;fs-base mb-1&quot;&gt;Secure online payment&lt;/h6&gt;
              &lt;p class=&quot;mb-0 fs-ms text-muted&quot;&gt;We possess SSL / Secure сertificate&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr class=&quot;mb-5&quot;&gt;
      &lt;div class=&quot;row pb-2&quot;&gt;
        &lt;div class=&quot;col-md-6 text-center text-md-start mb-4&quot;&gt;
          &lt;div class=&quot;text-nowrap mb-4&quot;&gt;
            &lt;a class=&quot;d-inline-block align-middle mt-n1 me-3&quot; href=&quot;#&quot;&gt;
              &lt;img class=&quot;d-block&quot; width=&quot;117&quot; src=&quot;path-to-logo&quot; alt=&quot;Cartzilla&quot;/&gt;
            &lt;/a&gt;
            &lt;div class=&quot;btn-group dropdown disable-autohide&quot;&gt;
              &lt;button class=&quot;btn btn-outline-secondary btn-sm dropdown-toggle px-2&quot; type=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot;&gt;
                &lt;img class=&quot;me-2&quot; width=&quot;20&quot; src=&quot;path-to-image&quot; alt=&quot;English&quot;/&gt;
                Eng / $
              &lt;/button&gt;
              &lt;ul class=&quot;dropdown-menu my-1&quot;&gt;
                &lt;li class=&quot;dropdown-item&quot;&gt;
                  &lt;select class=&quot;form-select form-select-sm&quot;&gt;
                    &lt;option value=&quot;usd&quot;&gt;$ USD&lt;/option&gt;
                    &lt;option value=&quot;eur&quot;&gt;€ EUR&lt;/option&gt;
                    &lt;option value=&quot;ukp&quot;&gt;£ UKP&lt;/option&gt;
                    &lt;option value=&quot;jpy&quot;&gt;¥ JPY&lt;/option&gt;
                  &lt;/select&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a class=&quot;dropdown-item pb-1&quot; href=&quot;#&quot;&gt;
                    &lt;img class=&quot;me-2&quot; width=&quot;20&quot; src=&quot;path-to-image&quot; alt=&quot;Français&quot;/&gt;
                    Français
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a class=&quot;dropdown-item pb-1&quot; href=&quot;#&quot;&gt;
                    &lt;img class=&quot;me-2&quot; width=&quot;20&quot; src=&quot;path-to-image&quot; alt=&quot;Deutsch&quot;/&gt;
                    Deutsch
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;
                    &lt;img class=&quot;me-2&quot; width=&quot;20&quot; src=&quot;path-to-image&quot; alt=&quot;Italiano&quot;/&gt;
                    Italiano
                  &lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;widget widget-links&quot;&gt;
            &lt;ul class=&quot;widget-list d-flex flex-wrap justify-content-center justify-content-md-start&quot;&gt;
              &lt;li class=&quot;widget-list-item me-4&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Outlets&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;widget-list-item me-4&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Affiliates&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;widget-list-item me-4&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Support&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;widget-list-item me-4&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Privacy&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;widget-list-itemme-4&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Terms of use&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-md-6 text-center text-md-end mb-4&quot;&gt;
          &lt;div class=&quot;mb-3&quot;&gt;
            &lt;a class=&quot;btn-social bs-outline bs-twitter ms-2 mb-2&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;ci-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a class=&quot;btn-social bs-outline bs-facebook ms-2 mb-2&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;ci-facebook&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a class=&quot;btn-social bs-outline bs-instagram ms-2 mb-2&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;ci-instagram&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a class=&quot;btn-social bs-outline bs-pinterest ms-2 mb-2&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;ci-pinterest&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a class=&quot;btn-social bs-outline bs-youtube ms-2 mb-2&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;ci-youtube&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;img class=&quot;d-inline-block&quot; width=&quot;187&quot; src=&quot;path-to-image&quot; alt=&quot;Payment methods&quot;/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;pb-4 fs-xs text-muted text-center text-md-start&quot;&gt;© All rights reserved. Made by &lt;a class=&quot;text-muted&quot; href=&quot;#&quot;&gt;Createx Studio&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/footer&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug1" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Light footer
footer.bg-secondary.pt-5
  .container
    .row.pb-2
      .col-md-4.col-sm-6
        .widget.widget-links.pb-2.mb-4
          h3.widget-title Shop departments
          ul.widget-list
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Sneakers &amp;amp; Athletic
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Athletic Apparel
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Sandals
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Jeans
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Shirts &amp;amp; Tops
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Shorts
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) T-Shirts
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Swimwear
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Clogs &amp;amp; Mules
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Bags &amp;amp; Wallets
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Accessories
            li.widget-list-item  
              a.widget-list-link(href=&quot;#&quot;) Sunglasses &amp;amp; Eyewear
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Watches
      .col-md-4.col-sm-6
        .widget.widget-links.pb-2.mb-4
          h3.widget-title Account &amp;amp; shipping info
          ul.widget-list
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Your account
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Shipping rates &amp;amp; policies
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Refunds &amp;amp; replacements
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Order tracking
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Delivery info
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Taxes &amp;amp; fees
        .widget.widget-links.pb-2.mb-4
          h3.widget-title About us
          ul.widget-list
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) About company
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Our team
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Careers
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) News
      .col-md-4
        .widget.pb-2.mb-4
          h3.widget-title.pb-1 Stay informed
          form.input-group.flex-nowrap
            i.ci-mail.position-absolute.top-50.translate-middle-y.text-muted.fs-base.ms-3
            input(type=&quot;email&quot;, placeholder=&quot;Your email&quot;, requied).form-control.rounded-start
            button(type=&quot;submit&quot;).btn.btn-primary
              | Subscribe*
          .form-text *Subscribe to our newsletter to receive early discount offers, updates and new products info.
        .widget.pb-2.mb-4
          h3.widget-title.pb-1 Download our app
          .d-flex.flex-wrap
            .me-2.mb-2
              a(href=&quot;#&quot;, role=&quot;button&quot;).btn-market.btn-apple
                span.btn-market-subtitle Download on the
                span.btn-market-title App Store
            .mb-2
              a(href=&quot;#&quot;, role=&quot;button&quot;).btn-market.btn-google
                span.btn-market-subtitle Download on the
                span.btn-market-title Google Play
  .pt-5(style=&quot;background-color: #ecf2f7;&quot;)
    .container
      .row.pb-3
        .col-md-3.col-sm-6.mb-4
          .d-flex
            i.ci-rocket.text-primary(style=&quot;font-size: 2.25rem;&quot;)
            .ps-3
              h6.fs-base.mb-1 Fast and free delivery
              p.mb-0.fs-ms.text-muted Free delivery for all orders over $200
        .col-md-3.col-sm-6.mb-4
          .d-flex
            i.ci-currency-exchange.text-primary(style=&quot;font-size: 2.25rem;&quot;)
            .ps-3
              h6.fs-base.mb-1 Money back guarantee
              p.mb-0.fs-ms.text-muted We return money within 30 days
        .col-md-3.col-sm-6.mb-4
          .d-flex
            i.ci-support.text-primary(style=&quot;font-size: 2.25rem;&quot;)
            .ps-3
              h6.fs-base.mb-1 24/7 customer support
              p.mb-0.fs-ms.text-muted Friendly 24/7 customer support
        .col-md-3.col-sm-6.mb-4
          .d-flex
            i.ci-card.text-primary(style=&quot;font-size: 2.25rem;&quot;)
            .ps-3
              h6.fs-base.mb-1 Secure online payment
              p.mb-0.fs-ms.text-muted We possess SSL / Secure сertificate
      hr.mb-5
      .row.pb-2
        .col-md-6.text-center.text-md-start.mb-4
          .text-nowrap.mb-4
            a(href=&quot;#&quot;).d-inline-block.align-middle.mt-n1.me-3
              img(src=&quot;path-to-logo&quot;, width=&quot;117&quot;, alt=&quot;Cartzilla&quot;).d-block
            .btn-group.dropdown.disable-autohide
              button(type=&quot;button&quot;, data-bs-toggle=&quot;dropdown&quot;).btn.btn-outline-secondary.btn-sm.dropdown-toggle.px-2
                img(src=&quot;path-to-image&quot;, width=&quot;20&quot;, alt=&quot;English&quot;).me-2
                | Eng / $
              ul.dropdown-menu.my-1
                li.dropdown-item
                  select.form-select.form-select-sm
                    option(value=&quot;usd&quot;) $ USD
                    option(value=&quot;eur&quot;) € EUR
                    option(value=&quot;ukp&quot;) £ UKP
                    option(value=&quot;jpy&quot;) ¥ JPY
                li
                  a(href=&quot;#&quot;).dropdown-item.pb-1
                    img(src=&quot;path-to-image&quot;, width=&quot;20&quot;, alt=&quot;Français&quot;).me-2
                    | Français
                li
                  a(href=&quot;#&quot;).dropdown-item.pb-1
                    img(src=&quot;path-to-image&quot;, width=&quot;20&quot;, alt=&quot;Deutsch&quot;).me-2
                    | Deutsch
                li
                  a(href=&quot;#&quot;).dropdown-item
                    img(src=&quot;path-to-image&quot;, width=&quot;20&quot;, alt=&quot;Italiano&quot;)(width=&quot;20&quot;).me-2
                    | Italiano
          .widget.widget-links
            ul.widget-list.d-flex.flex-wrap.justify-content-center.justify-content-md-start
              li.widget-list-item.me-4
                a.widget-list-link(href=&quot;#&quot;) Outlets
              li.widget-list-item.me-4
                a.widget-list-link(href=&quot;#&quot;) Affiliates
              li.widget-list-item.me-4
                a.widget-list-link(href=&quot;#&quot;) Support
              li.widget-list-item.me-4
                a.widget-list-link(href=&quot;#&quot;) Privacy
              li.widget-list-item.me-4
                a.widget-list-link(href=&quot;#&quot;) Terms of use
        .col-md-6.text-center.text-md-end.mb-4
          .mb-3
            a(href=&quot;#&quot;).btn-social.bs-outline.bs-twitter.ms-2.mb-2
              i.ci-twitter
            a(href=&quot;#&quot;).btn-social.bs-outline.bs-facebook.ms-2.mb-2
              i.ci-facebook
            a(href=&quot;#&quot;).btn-social.bs-outline.bs-instagram.ms-2.mb-2
              i.ci-instagram
            a(href=&quot;#&quot;).btn-social.bs-outline.bs-pinterest.ms-2.mb-2
              i.ci-pinterest
            a(href=&quot;#&quot;).btn-social.bs-outline.bs-youtube.ms-2.mb-2
              i.ci-youtube
          img(src=&quot;path-to-image&quot; width=&quot;187&quot; alt=&quot;Payment methods&quot;).d-inline-block
      .pb-4.fs-xs.text-muted.text-center.text-md-start
        | © All rights reserved. Made by 
        a.text-muted(href=&quot;#&quot;) Createx Studio
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Dark version-->
          <section class="pb-5 mb-md-2" id="footer-dark">
            <h2 class="h5 mb-3">Dark version</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result2" data-bs-toggle="tab" role="tab" aria-controls="result2" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html2" data-bs-toggle="tab" role="tab" aria-controls="html2" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug2" data-bs-toggle="tab" role="tab" aria-controls="pug2" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result2" role="tabpanel">
                    <footer class="bg-dark pt-5">
                      <div class="px-4">
                        <div class="row pb-2">
                          <div class="col-lg-4 col-sm-6">
                            <div class="widget widget-links widget-light pb-2 mb-4">
                              <h3 class="widget-title text-light">Shop departments</h3>
                              <ul class="widget-list">
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Sneakers &amp; Athletic</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Athletic Apparel</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Sandals</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Jeans</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Shirts &amp; Tops</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Shorts</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">T-Shirts</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Swimwear</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Clogs &amp; Mules</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Bags &amp; Wallets</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Accessories</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Sunglasses &amp; Eyewear</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Watches</a></li>
                              </ul>
                            </div>
                          </div>
                          <div class="col-lg-4 col-sm-6">
                            <div class="widget widget-links widget-light pb-2 mb-4">
                              <h3 class="widget-title text-light">Account &amp; shipping info</h3>
                              <ul class="widget-list">
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Your account</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Shipping rates &amp; policies</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Refunds &amp; replacements</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Order tracking</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Delivery info</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Taxes &amp; fees</a></li>
                              </ul>
                            </div>
                            <div class="widget widget-links widget-light pb-2 mb-4">
                              <h3 class="widget-title text-light">About us</h3>
                              <ul class="widget-list">
                                <li class="widget-list-item"><a class="widget-list-link" href="#">About company</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Our team</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">Careers</a></li>
                                <li class="widget-list-item"><a class="widget-list-link" href="#">News</a></li>
                              </ul>
                            </div>
                          </div>
                          <div class="col-lg-4">
                            <div class="widget pb-2 mb-4">
                              <h3 class="widget-title text-light pb-1">Stay informed</h3>
                              <form class="input-group flex-nowrap"><i class="ci-mail position-absolute top-50 translate-middle-y text-muted fs-base ms-3"></i>
                                <input class="form-control rounded-start" type="email" placeholder="Your email" required>
                                <button class="btn btn-primary" type="submit">Subscribe*</button>
                              </form>
                              <div class="form-text text-light opacity-50">*Subscribe to our newsletter to receive early discount offers, updates and new products info.</div>
                            </div>
                            <div class="widget pb-2 mb-4">
                              <h3 class="widget-title text-light pb-1">Download our app</h3>
                              <div class="d-flex flex-wrap">
                                <div class="me-2 mb-2"><a class="btn-market btn-apple" href="#" role="button"><span class="btn-market-subtitle">Download on the</span><span class="btn-market-title">App Store</span></a></div>
                                <div class="mb-2"><a class="btn-market btn-google" href="#" role="button"><span class="btn-market-subtitle">Download on the</span><span class="btn-market-title">Google Play</span></a></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="pt-5 px-4 bg-darker">
                        <div class="row pb-3">
                          <div class="col-xl-3 col-sm-6 mb-4">
                            <div class="d-flex"><i class="ci-rocket text-primary" style="font-size: 2.25rem;"></i>
                              <div class="ps-3">
                                <h6 class="fs-base text-light mb-1">Fast and free delivery</h6>
                                <p class="mb-0 fs-ms text-light opacity-50">Free delivery for all orders over $200</p>
                              </div>
                            </div>
                          </div>
                          <div class="col-xl-3 col-sm-6 mb-4">
                            <div class="d-flex"><i class="ci-currency-exchange text-primary" style="font-size: 2.25rem;"></i>
                              <div class="ps-3">
                                <h6 class="fs-base text-light mb-1">Money back guarantee</h6>
                                <p class="mb-0 fs-ms text-light opacity-50">We return money within 30 days</p>
                              </div>
                            </div>
                          </div>
                          <div class="col-xl-3 col-sm-6 mb-4">
                            <div class="d-flex"><i class="ci-support text-primary" style="font-size: 2.25rem;"></i>
                              <div class="ps-3">
                                <h6 class="fs-base text-light mb-1">24/7 customer support</h6>
                                <p class="mb-0 fs-ms text-light opacity-50">Friendly 24/7 customer support</p>
                              </div>
                            </div>
                          </div>
                          <div class="col-xl-3 col-sm-6 mb-4">
                            <div class="d-flex"><i class="ci-card text-primary" style="font-size: 2.25rem;"></i>
                              <div class="ps-3">
                                <h6 class="fs-base text-light mb-1">Secure online payment</h6>
                                <p class="mb-0 fs-ms text-light opacity-50">We possess SSL / Secure сertificate</p>
                              </div>
                            </div>
                          </div>
                        </div>
                        <hr class="hr-light mb-5">
                        <div class="row pb-2">
                          <div class="col-md-6 text-center text-md-start mb-4">
                            <div class="text-nowrap mb-4"><a class="d-inline-block align-middle mt-n1 me-3" href="#"><img class="d-block" src="../img/footer-logo-light.png" width="117" alt="Cartzilla"></a>
                              <div class="btn-group dropdown disable-autohide">
                                <button class="btn btn-outline-light border-light btn-sm dropdown-toggle px-2" type="button" data-bs-toggle="dropdown"><img class="me-2" src="../img/flags/en.png" width="20" alt="English">Eng / $</button>
                                <ul class="dropdown-menu my-1">
                                  <li class="dropdown-item">
                                    <select class="form-select form-select-sm">
                                      <option value="usd">$ USD</option>
                                      <option value="eur">€ EUR</option>
                                      <option value="ukp">£ UKP</option>
                                      <option value="jpy">¥ JPY</option>
                                    </select>
                                  </li>
                                  <li><a class="dropdown-item pb-1" href="#"><img class="me-2" src="../img/flags/fr.png" width="20" alt="Français">Français</a></li>
                                  <li><a class="dropdown-item pb-1" href="#"><img class="me-2" src="../img/flags/de.png" width="20" alt="Deutsch">Deutsch</a></li>
                                  <li><a class="dropdown-item" href="#"><img class="me-2" src="../img/flags/it.png" width="20" alt="Italiano">Italiano</a></li>
                                </ul>
                              </div>
                            </div>
                            <div class="widget widget-links widget-light">
                              <ul class="widget-list d-flex flex-wrap justify-content-center justify-content-md-start">
                                <li class="widget-list-item me-4"><a class="widget-list-link" href="#">Outlets</a></li>
                                <li class="widget-list-item me-4"><a class="widget-list-link" href="#">Affiliates</a></li>
                                <li class="widget-list-item me-4"><a class="widget-list-link" href="#">Support</a></li>
                                <li class="widget-list-item me-4"><a class="widget-list-link" href="#">Privacy</a></li>
                                <li class="widget-list-item me-4"><a class="widget-list-link" href="#">Terms of use</a></li>
                              </ul>
                            </div>
                          </div>
                          <div class="col-md-6 text-center text-md-end mb-4">
                            <div class="mb-3"><a class="btn-social bs-light bs-twitter ms-2 mb-2" href="#"><i class="ci-twitter"></i></a><a class="btn-social bs-light bs-facebook ms-2 mb-2" href="#"><i class="ci-facebook"></i></a><a class="btn-social bs-light bs-instagram ms-2 mb-2" href="#"><i class="ci-instagram"></i></a><a class="btn-social bs-light bs-pinterest ms-2 mb-2" href="#"><i class="ci-pinterest"></i></a><a class="btn-social bs-light bs-youtube ms-2 mb-2" href="#"><i class="ci-youtube"></i></a></div><img class="d-inline-block" src="../img/cards-alt.png" width="187" alt="Payment methods">
                          </div>
                        </div>
                        <div class="pb-4 fs-xs text-light opacity-50 text-center text-md-start">© All rights reserved. Made by <a class="text-light" href="#">Createx Studio</a></div>
                      </div>
                    </footer>
                  </div>
                  <div class="tab-pane fade" id="html2" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Dark footer --&gt;
&lt;footer class=&quot;bg-dark pt-5&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row pb-2&quot;&gt;
      &lt;div class=&quot;col-md-4 col-sm-6&quot;&gt;
        &lt;div class=&quot;widget widget-links widget-light pb-2 mb-4&quot;&gt;
          &lt;h3 class=&quot;widget-title text-light&quot;&gt;Shop departments&lt;/h3&gt;
          &lt;ul class=&quot;widget-list&quot;&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Sneakers &amp; Athletic&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Athletic Apparel&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Sandals&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Jeans&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Shirts &amp; Tops&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Shorts&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;T-Shirts&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Swimwear&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Clogs &amp; Mules&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Bags &amp; Wallets&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Accessories&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Sunglasses &amp; Eyewear&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Watches&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-md-4 col-sm-6&quot;&gt;
        &lt;div class=&quot;widget widget-links widget-light pb-2 mb-4&quot;&gt;
          &lt;h3 class=&quot;widget-title text-light&quot;&gt;Account &amp; shipping info&lt;/h3&gt;
          &lt;ul class=&quot;widget-list&quot;&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Your account&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Shipping rates &amp; policies&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Refunds &amp; replacements&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Order tracking&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Delivery info&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Taxes &amp; fees&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class=&quot;widget widget-links widget-light pb-2 mb-4&quot;&gt;
          &lt;h3 class=&quot;widget-title&quot;&gt;About us&lt;/h3&gt;
          &lt;ul class=&quot;widget-list&quot;&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;About company&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Our team&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Careers&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;widget-list-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;News&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-md-4&quot;&gt;
        &lt;div class=&quot;widget pb-2 mb-4&quot;&gt;
          &lt;h3 class=&quot;widget-title text-light pb-1&quot;&gt;Stay informed&lt;/h3&gt;
          &lt;form class=&quot;input-group flex-nowrap&quot;&gt;
            &lt;i class=&quot;ci-mail position-absolute top-50 translate-middle-y text-muted fs-base ms-3&quot;&gt;&lt;/i&gt;
            &lt;input class=&quot;form-control rounded-start&quot; type=&quot;email&quot; placeholder=&quot;Your email&quot; required&gt;
            &lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot;&gt;Subscribe*&lt;/button&gt;
          &lt;/form&gt;
          &lt;div class=&quot;form-text text-light opacity-50&quot;&gt;*Subscribe to our newsletter to receive early discount offers, updates and new products info.&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;widget pb-2 mb-4&quot;&gt;
          &lt;h3 class=&quot;widget-title text-light pb-1&quot;&gt;Download our app&lt;/h3&gt;
          &lt;div class=&quot;d-flex flex-wrap&quot;&gt;
            &lt;div class=&quot;me-2 mb-2&quot;&gt;
              &lt;a class=&quot;btn-market btn-apple&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;
                &lt;span class=&quot;btn-market-subtitle&quot;&gt;Download on the&lt;/span&gt;
                &lt;span class=&quot;btn-market-title&quot;&gt;App Store&lt;/span&gt;
              &lt;/a&gt;
            &lt;/div&gt;
            &lt;div class=&quot;mb-2&quot;&gt;
              &lt;a class=&quot;btn-market btn-google&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;
                &lt;span class=&quot;btn-market-subtitle&quot;&gt;Download on the&lt;/span&gt;
                &lt;span class=&quot;btn-market-title&quot;&gt;Google Play&lt;/span&gt;
              &lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;pt-5 bg-darker&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row pb-3&quot;&gt;
        &lt;div class=&quot;col-md-3 col-sm-6 mb-4&quot;&gt;
          &lt;div class=&quot;d-flex&quot;&gt;
            &lt;i class=&quot;ci-rocket text-primary&quot; style=&quot;font-size: 2.25rem;&quot;&gt;&lt;/i&gt;
            &lt;div class=&quot;ps-3&quot;&gt;
              &lt;h6 class=&quot;fs-base text-light mb-1&quot;&gt;Fast and free delivery&lt;/h6&gt;
              &lt;p class=&quot;mb-0 fs-ms text-light opacity-50&quot;&gt;Free delivery for all orders over $200&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-md-3 col-sm-6 mb-4&quot;&gt;
          &lt;div class=&quot;d-flex&quot;&gt;
            &lt;i class=&quot;ci-currency-exchange text-primary&quot; style=&quot;font-size: 2.25rem;&quot;&gt;&lt;/i&gt;
            &lt;div class=&quot;ps-3&quot;&gt;
              &lt;h6 class=&quot;fs-base text-light mb-1&quot;&gt;Money back guarantee&lt;/h6&gt;
              &lt;p class=&quot;mb-0 fs-ms text-light opacity-50&quot;&gt;We return money within 30 days&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-md-3 col-sm-6 mb-4&quot;&gt;
          &lt;div class=&quot;d-flex&quot;&gt;
            &lt;i class=&quot;ci-support text-primary&quot; style=&quot;font-size: 2.25rem;&quot;&gt;&lt;/i&gt;
            &lt;div class=&quot;ps-3&quot;&gt;
              &lt;h6 class=&quot;fs-base text-light mb-1&quot;&gt;24/7 customer support&lt;/h6&gt;
              &lt;p class=&quot;mb-0 fs-ms text-light opacity-50&quot;&gt;Friendly 24/7 customer support&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-md-3 col-sm-6 mb-4&quot;&gt;
          &lt;div class=&quot;d-flex&quot;&gt;
            &lt;i class=&quot;ci-card text-primary&quot; style=&quot;font-size: 2.25rem;&quot;&gt;&lt;/i&gt;
            &lt;div class=&quot;ps-3&quot;&gt;
              &lt;h6 class=&quot;fs-base text-light mb-1&quot;&gt;Secure online payment&lt;/h6&gt;
              &lt;p class=&quot;mb-0 fs-ms text-light opacity-50&quot;&gt;We possess SSL / Secure сertificate&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr class=&quot;hr-light mb-5&quot;&gt;
      &lt;div class=&quot;row pb-2&quot;&gt;
        &lt;div class=&quot;col-md-6 text-center text-md-start mb-4&quot;&gt;
          &lt;div class=&quot;text-nowrap mb-4&quot;&gt;
            &lt;a class=&quot;d-inline-block align-middle mt-n1 me-3&quot; href=&quot;#&quot;&gt;
              &lt;img class=&quot;d-block&quot; width=&quot;117&quot; src=&quot;path-to-logo&quot; alt=&quot;Cartzilla&quot;/&gt;
            &lt;/a&gt;
            &lt;div class=&quot;btn-group dropdown disable-autohide&quot;&gt;
              &lt;button class=&quot;btn btn-outline-light border-light btn-sm dropdown-toggle px-2&quot; type=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot;&gt;
                &lt;img class=&quot;me-2&quot; width=&quot;20&quot; src=&quot;path-to-image&quot; alt=&quot;English&quot;/&gt;
                Eng / $
              &lt;/button&gt;
              &lt;ul class=&quot;dropdown-menu my-1&quot;&gt;
                &lt;li class=&quot;dropdown-item&quot;&gt;
                  &lt;select class=&quot;form-select form-select-sm&quot;&gt;
                    &lt;option value=&quot;usd&quot;&gt;$ USD&lt;/option&gt;
                    &lt;option value=&quot;eur&quot;&gt;€ EUR&lt;/option&gt;
                    &lt;option value=&quot;ukp&quot;&gt;£ UKP&lt;/option&gt;
                    &lt;option value=&quot;jpy&quot;&gt;¥ JPY&lt;/option&gt;
                  &lt;/select&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a class=&quot;dropdown-item pb-1&quot; href=&quot;#&quot;&gt;
                    &lt;img class=&quot;me-2&quot; width=&quot;20&quot; src=&quot;path-to-image&quot; alt=&quot;Français&quot;/&gt;
                    Français
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a class=&quot;dropdown-item pb-1&quot; href=&quot;#&quot;&gt;
                    &lt;img class=&quot;me-2&quot; width=&quot;20&quot; src=&quot;path-to-image&quot; alt=&quot;Deutsch&quot;/&gt;
                    Deutsch
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;
                    &lt;img class=&quot;me-2&quot; width=&quot;20&quot; src=&quot;path-to-image&quot; alt=&quot;Italiano&quot;/&gt;
                    Italiano
                  &lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;widget widget-links widget-light&quot;&gt;
            &lt;ul class=&quot;widget-list d-flex flex-wrap justify-content-center justify-content-md-start&quot;&gt;
              &lt;li class=&quot;widget-list-item me-4&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Outlets&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;widget-list-item me-4&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Affiliates&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;widget-list-item me-4&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Support&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;widget-list-item me-4&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Privacy&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot; widget-list-itemme-4&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;widget-list-link&quot;&gt;Terms of use&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-md-6 text-center text-md-end mb-4&quot;&gt;
          &lt;div class=&quot;mb-3&quot;&gt;
            &lt;a class=&quot;btn-social bs-light bs-twitter ms-2 mb-2&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;ci-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a class=&quot;btn-social bs-light bs-facebook ms-2 mb-2&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;ci-facebook&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a class=&quot;btn-social bs-light bs-instagram ms-2 mb-2&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;ci-instagram&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a class=&quot;btn-social bs-light bs-pinterest ms-2 mb-2&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;ci-pinterest&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a class=&quot;btn-social bs-light bs-youtube ms-2 mb-2&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;ci-youtube&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;img class=&quot;d-inline-block&quot; width=&quot;187&quot; src=&quot;path-to-image&quot; alt=&quot;Payment methods&quot;/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;pb-4 fs-xs text-light opacity-50 text-center text-md-start&quot;&gt;© All rights reserved. Made by &lt;a class=&quot;text-light&quot; href=&quot;#&quot;&gt;Createx Studio&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/footer&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug2" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Dark footer
footer.bg-dark.pt-5
  .container
    .row.pb-2
      .col-md-4.col-sm-6
        .widget.widget-links.widget-light.pb-2.mb-4
          h3.widget-title.text-light Shop departments
          ul.widget-list
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Sneakers &amp;amp; Athletic
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Athletic Apparel
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Sandals
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Jeans
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Shirts &amp;amp; Tops
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Shorts
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) T-Shirts
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Swimwear
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Clogs &amp;amp; Mules
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Bags &amp;amp; Wallets
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Accessories
            li.widget-list-item 
              a.widget-list-link(href=&quot;#&quot;) Sunglasses &amp;amp; Eyewear
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Watches
      .col-md-4.col-sm-6
        .widget.widget-links.widget-light.pb-2.mb-4
          h3.widget-title.text-light Account &amp;amp; shipping info
          ul.widget-list
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Your account
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Shipping rates &amp;amp; policies
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Refunds &amp;amp; replacements
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Order tracking
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Delivery info
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Taxes &amp;amp; fees
        .widget.widget-links.widget-light.pb-2.mb-4
          h3.widget-title.text-light About us
          ul.widget-list
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) About company
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Our team
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) Careers
            li.widget-list-item
              a.widget-list-link(href=&quot;#&quot;) News
      .col-md-4
        .widget.pb-2.mb-4
          h3.widget-title.text-light.pb-1 Stay informed
          form.input-group.flex-nowrap
            i.ci-mail.position-absolute.top-50.translate-middle-y.text-muted.fs-base.ms-3
            input(type=&quot;email&quot;, placeholder=&quot;Your email&quot;, required).form-control.rounded-start
            button(type=&quot;submit&quot;).btn.btn-primary
              | Subscribe*
          .form-text.text-light.opacity-50 *Subscribe to our newsletter to receive early discount offers, updates and new products info.
        .widget.pb-2.mb-4
          h3.widget-title.text-light.pb-1 Download our app
          .d-flex.flex-wrap
            .me-2.mb-2
              a(href=&quot;#&quot;, role=&quot;button&quot;).btn-market.btn-apple
                span.btn-market-subtitle Download on the
                span.btn-market-title App Store
            .mb-2
              a(href=&quot;#&quot;, role=&quot;button&quot;).btn-market.btn-google
                span.btn-market-subtitle Download on the
                span.btn-market-title Google Play
  .pt-5.bg-darker
    .container
      .row.pb-3
        .col-md-3.col-sm-6.mb-4
          .d-flex
            i.ci-rocket.text-primary(style=&quot;font-size: 2.25rem;&quot;)
            .ps-3
              h6.fs-base.text-light.mb-1 Fast and free delivery
              p.mb-0.fs-ms.text-light.opacity-50 Free delivery for all orders over $200
        .col-md-3.col-sm-6.mb-4
          .d-flex
            i.ci-currency-exchange.text-primary(style=&quot;font-size: 2.25rem;&quot;)
            .ps-3
              h6.fs-base.text-light.mb-1 Money back guarantee
              p.mb-0.fs-ms.text-light.opacity-50 We return money within 30 days
        .col-md-3.col-sm-6.mb-4
          .d-flex
            i.ci-support.text-primary(style=&quot;font-size: 2.25rem;&quot;)
            .ps-3
              h6.fs-base.text-light.mb-1 24/7 customer support
              p.mb-0.fs-ms.text-light.opacity-50 Friendly 24/7 customer support
        .col-md-3.col-sm-6.mb-4
          .d-flex
            i.ci-card.text-primary(style=&quot;font-size: 2.25rem;&quot;)
            .ps-3
              h6.fs-base.text-light.mb-1 Secure online payment
              p.mb-0.fs-ms.text-light.opacity-50 We possess SSL / Secure сertificate
      hr.hr-light.mb-5
      .row.pb-2
        .col-md-6.text-center.text-md-start.mb-4
          .text-nowrap.mb-4
            a(href=&quot;#&quot;).d-inline-block.align-middle.mt-n1.me-3
              img(src=&quot;path-to-logo&quot;, width=&quot;117&quot;, alt=&quot;Cartzilla&quot;).d-block
            .btn-group.dropdown.disable-autohide
              button(type=&quot;button&quot;, data-bs-toggle=&quot;dropdown&quot;).btn.btn-outline-light.border-light.btn-sm.dropdown-toggle.px-2
                img(src=&quot;path-to-image&quot;, width=&quot;20&quot;, alt=&quot;English&quot;).me-2
                | Eng / $
              ul.dropdown-menu.my-1
                li.dropdown-item
                  select.form-select.form-select-sm
                    option(value=&quot;usd&quot;) $ USD
                    option(value=&quot;eur&quot;) € EUR
                    option(value=&quot;ukp&quot;) £ UKP
                    option(value=&quot;jpy&quot;) ¥ JPY
                li
                  a(href=&quot;#&quot;).dropdown-item.pb-1
                    img(src=&quot;path-to-image&quot;, width=&quot;20&quot;, alt=&quot;Français&quot;).me-2
                    | Français
                li
                  a(href=&quot;#&quot;).dropdown-item.pb-1
                    img(src=&quot;path-to-image&quot;, width=&quot;20&quot;, alt=&quot;Deutsch&quot;).me-2
                    | Deutsch
                li
                  a(href=&quot;#&quot;).dropdown-item
                    img(src=&quot;path-to-image&quot;, width=&quot;20&quot;, alt=&quot;Italiano&quot;).me-2
                    | Italiano
          .widget.widget-links.widget-light
            ul.widget-list.d-flex.flex-wrap.justify-content-center.justify-content-md-start
              li.widget-list-item.me-4
                a.widget-list-link(href=&quot;#&quot;) Outlets
              li.widget-list-item.me-4
                a.widget-list-link(href=&quot;#&quot;) Affiliates
              li.widget-list-item.me-4
                a.widget-list-link(href=&quot;#&quot;) Support
              li.widget-list-item.me-4
                a.widget-list-link(href=&quot;#&quot;) Privacy
              li.widget-list-item.me-4
                a.widget-list-link(href=&quot;#&quot;) Terms of use
        .col-md-6.text-center.text-md-end.mb-4
          .mb-3
            a(href=&quot;#&quot;).btn-social.bs-light.bs-twitter.ms-2.mb-2
              i.ci-twitter
            a(href=&quot;#&quot;).btn-social.bs-light.bs-facebook.ms-2.mb-2
              i.ci-facebook
            a(href=&quot;#&quot;).btn-social.bs-light.bs-instagram.ms-2.mb-2
              i.ci-instagram
            a(href=&quot;#&quot;).btn-social.bs-light.bs-pinterest.ms-2.mb-2
              i.ci-pinterest
            a(href=&quot;#&quot;).btn-social.bs-light.bs-youtube.ms-2.mb-2
              i.ci-youtube
          img(src=&quot;path-to-image&quot;, width=&quot;187&quot;, alt=&quot;Payment methods&quot;).d-inline-block
      .pb-4.fs-xs.text-light.opacity-50.text-center.text-md-start
        | © All rights reserved. Made by 
        a.text-light(href=&quot;#&quot;) Createx Studio</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
        <!-- Quick (anchor) navigation-->
        <div class="col-xxl-3 d-none d-xxl-block ps-5">
          <aside class="sticky-top pt-5">
            <div class="pt-5 mt-5">
              <div class="widget widget-links ps-4 border-start">
                <h3 class="widget-title">Jump to</h3>
                <ul class="widget-list">
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#footer-light">Light version</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#footer-dark">Dark version</a>
                  </li>
                </ul>
              </div>
            </div>
          </aside>
        </div>
      </section>
    </main>
    <!-- Back To Top Button--><a class="btn-scroll-top" href="#top" data-scroll data-fixed-element><span class="btn-scroll-top-tooltip text-muted fs-sm me-2">Top</span><i class="btn-scroll-top-icon ci-arrow-up">   </i></a>
    <!-- Vendor scrits: js libraries and plugins-->
    <script src="../vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../vendor/simplebar/dist/simplebar.min.js"></script>
    <script src="../vendor/tiny-slider/dist/min/tiny-slider.js"></script>
    <script src="../vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
    <script src="../vendor/prismjs/components/prism-core.min.js"></script>
    <script src="../vendor/prismjs/components/prism-markup.min.js"></script>
    <script src="../vendor/prismjs/components/prism-clike.min.js"></script>
    <script src="../vendor/prismjs/components/prism-javascript.min.js"></script>
    <script src="../vendor/prismjs/components/prism-pug.min.js"></script>
    <script src="../vendor/prismjs/plugins/toolbar/prism-toolbar.min.js"></script>
    <script src="../vendor/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
    <script src="../vendor/prismjs/plugins/line-numbers/prism-line-numbers.min.js"></script>
    <!-- Main theme script-->
    <script src="../js/theme.min.js"></script>
  </body>
</html>